.createRoleDialog, .editRoleDialog {
  .roleNameInput {
    width: 420px;
  }
  .Checkbox-box {
    margin-left: 12px;
  }
  .permissionList {
    width: 100%;
    border-collapse: collapse;
    th {
      height: 36px;
      background-color: #f5f5f5;
      font-weight: normal;
      text-align: left;
    }
    td, th {
      &:first-child {
        padding-left: 18px;
        padding-right: 5px;
      }
      &:last-child {
        text-align: right;
      }
    }
    .placeholder {
      border: none;
      height: 40px;
    }
    tbody td {
      height: 48px;
      border-bottom: 1px solid #ddd;
    }
    .noBorder td {
      border: none;
    }
    .permission + .childPermission {
      &:before {
        height: 75%;
      }
    }
    .childPermission td:first-child {
      position: relative;
      &:before {
        content: '';
        left: 24px;
        top: -25%;
        position: absolute;
        width: 0px;
        height: 75%;
        border-left: 1px solid #e0e0e0;
      }
      &:after {
        content: '';
        width: 14px;
        position: absolute;
        height: 0px;
        border-bottom: 1px solid #e0e0e0;
        top: 50%;
        left: 24px;
      }
    }
  }
  .Switch.Switch--off {
    .dot {
      background-color: #fff!important;
    }
  }
}
